<template>
  <ul class="box">
    <li class="box-txt" 
      v-for="item of letters" 
      :key="item"
      :ref="item"
      @click="btn"
      @touchstart.prevent="handletouchstart"
      @touchmove="handletouchmove"
      @touchend="handletouchend"
    >{{item}}</li>    

  </ul>
</template>

<script>



export default {
  name: "alphabet",
  props: ["cities"],
  data() {
    return {
      t: false,
      timers: null,
    }
  },
  computed: {
    letters() {
      const letters = [];
      for(let i in this.cities) {
        letters.push(i);
      }

      return letters; 
    }
  },
  methods: {
    btn(e) {
      this.$bus.$emit("dataFuntClick", e.target.innerText);
      
    },
    
    // 点击元素后被激发
    handletouchstart(e) {
      this.t = true;    
    },
    // 点击元素手指移动后被激发
    handletouchmove(e) {
      if(this.t) {      
        if(this.timers) {
          console.log("多次触发")
          clearTimeout(this.timers);
        }
        
        this.timers = setTimeout(() => {   
          let starty = this.$refs["A"][0].offsetTop;
          let touchy = e.touches[0].clientY - 79;
          let index = Math.floor((touchy - starty) / 20);
          
          if(index >= 0 && index <this.letters.length) {
            this.$bus.$emit("dataFuntClick", this.letters[index]);
          }
        }, 16);              
      }
    },
    // 手指松开后被激发
    handletouchend() {
      this.t = false;
    }
  },
}
</script>

<style scoped>
  .box {
    position: absolute;
    top: 79px;
    right: 0px;
    bottom: 0px;

    display: flex;
    flex-direction: column;
    justify-content: center;

  }
  .box .box-txt {
    padding: 3px 5px;
    color: #00bcd4;
    text-align: center;
  }
</style>